<template>
  <li class="todolist" @click="$emit('inpup-text', todo.text)">
    <span class="iconfont">
      <svg
        t="1636903100274"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2481"
        width="22"
        height="22"
      >
        <path
          d="M830.2 381.3c-17.2-40.6-41.8-77.1-73.1-108.4-31.3-31.3-67.8-55.9-108.4-73.1C606.7 182 562 173 516 173c-16.2 0-32.5 1.1-48.4 3.4-8.7 1.2-14.8 9.3-13.6 18.1 1.2 8.7 9.4 14.8 18.1 13.6 14.4-2.1 29.2-3.1 43.9-3.1 170.4 0 309 138.6 309 309S686.4 823 516 823 207 684.4 207 514c0-35.2 5.9-69.7 17.4-102.6 2.9-8.3-1.4-17.5-9.8-20.4-8.3-2.9-17.5 1.4-20.4 9.8C181.5 437.1 175 475.2 175 514c0 46 9 90.7 26.8 132.7 17.2 40.6 41.8 77.1 73.1 108.4 31.3 31.3 67.8 55.9 108.4 73.1C425.3 846 470 855 516 855c46 0 90.7-9 132.7-26.8 40.6-17.2 77.1-41.8 108.4-73.1s55.9-67.8 73.1-108.4C848 604.7 857 560 857 514c0-46-9-90.7-26.8-132.7zM258.3 314c3 2.6 6.7 3.9 10.4 3.9 4.5 0 9-1.9 12.1-5.6 22-25.5 47.7-47.1 76.6-64.2 7.6-4.5 10.1-14.3 5.6-21.9-4.5-7.6-14.3-10.1-21.9-5.6-31.8 18.9-60.2 42.7-84.4 70.8-5.9 6.8-5.1 16.9 1.6 22.6z"
          p-id="2482"
          fill="#CCC"

        ></path>
        <path
          d="M495 322c-8.8 0-16 7.2-16 16v192c0 4.9 2.2 9.3 5.7 12.3 2.9 3.5 7.3 5.7 12.3 5.7h192c8.8 0 16-7.2 16-16s-7.2-16-16-16H511V338c0-8.8-7.2-16-16-16z"
          p-id="2483"
          fill="#CCC"
        ></path>
      </svg>
    </span>
    <p class="text">{{ todo.text }}</p>
    <span class="delet" @click="$emit('delete-todo', todo.id)"
      ><img src="../assets/images/bxr.png"
    /></span>
  </li>
</template>

<script>
// import "../assets/css/iconfont.css";
export default {
  props: ["todo"],
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.todolist {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid rgba(124, 124, 124, 0.5);
  margin: 5px 0;
  display: flex;
  align-items: center;
  line-height: 50px;
  .iconfont {
    margin-left: 10px;
    display: flex;
    align-items: center;
    width: 25px;
    height: 25px;
  }
  .text {
    flex: 1;
  }
  .delet {
    width: 10%;
    img {
      width: 20px;
      vertical-align: middle;
    }
  }
}
</style>